<template>
  <m-box title="仓库管理" size="small" class="warehouse-management">
    <ul class="w-row">
      <li class="w-item">
        <div class="w-item__title">物料种类</div>
        <div class="w-item__content">
          <m-digital :number="mitemQty" color="#7FFF00" />
        </div>
      </li>
      <li class="w-item">
        <div class="w-item__title">成品库存（成品仓）</div>
        <div class="w-item__content">
          <m-digital :number="finishedProductQty" color="#BA55D3" />
        </div>
      </li>
    </ul>
    <div class="m-content">
      <top10Echart
        :loading="loading"
        :bar-width="30"
        :grid="grid"
        :labels="labels"
        :axisLabel="axisLabelConfig"
        :data="top5Data"
      />
    </div>
  </m-box>
</template>
<script setup>
import http from '@/utils/request'
import { numberFormat } from '@/utils/tools'
// import { onMounted } from 'vue'
import top10Echart from '@/views/WarehouseBoard/components/top10Echart/index.vue'

const mitemQty = ref(0)
const finishedProductQty = ref(0)

const grid = ref({
  top: '30px',
  bottom: '30px',
  left: '60px',
  right: '20px'
})
const axisLabelConfig = ref({
  rotate: 15
})
const loading = ref(false)
const labels = ref(Array.from({ length: 5 }).map((_, i) => `物料${i + 1}`))
const top5Data = ref(Array.from({ length: 5 }).map((_, i) => 0))
const getData = async () => {
  try {
    const res = await http.get('/v1/kanban/getWMSReport')
    mitemQty.value = res.mitemQty
    finishedProductQty.value = res.finishedProductQty
  } catch (e) {
    console.error(e)
  }
  try {
    const res = await http.get('/v1/kanban/GetWHTakeReport')
    let _label = []
    let _data = []
    res.forEach((r) => {
      _label.push(r.MITEM_NAME)
      _data.push(r.SumQty)
    })
    labels.value = _label
    top5Data.value = _data
  } catch (e) {
    console.error(e)
  }
}

function init() {
  getData()
}
onMounted(() => {
  init()
})
// 暴露方法
defineExpose({
  init
})
</script>
<style lang="less" scoped>
.warehouse-management {
  ::v-deep(.m-box__body) {
    overflow: auto;
    .dv-border-box-7 {
      .border-box-content {
        height: 100%;
        position: relative;
        .w-row {
          height: 20px;
          display: flex;
          justify-content: center;
          .w-item {
            flex: 1;
            vertical-align: baseline;
            text-align: center;
            .w-item__title {
              display: inline-block;
              padding: 0 10px;
              line-height: 20px;
            }
            .w-item__content {
              display: inline-block;
              position: relative;
              .m-digital {
                font-size: 16px;
                padding: 0;
              }
            }
          }
        }
        .m-content {
          height: calc(100% - 20px);
        }
      }
    }
  }
}
</style>
